<template>
	<div class="delegation">
		<div class="delegation-layout-head">
			<a-breadcrumb>
				<a-breadcrumb-item>
					<router-link :to="{ name: 'delegation' }">
						{{ $t('delegate.delegate', '委托授权') }}
					</router-link>
				</a-breadcrumb-item>
				<a-breadcrumb-item style="font-weight: bold">{{
					$t('delegate.historyList', '历史数据')
				}}</a-breadcrumb-item>
			</a-breadcrumb>
			<div class="delegation-layout-head-botton">
				<a-button @click="goHome">{{ $t('delegate.back', '返回') }}</a-button>
			</div>
		</div>

		<a-spin :spinning="spinningList">
			<div class="detegation-empty" v-if="!informationdata.length">
				<a-empty />
			</div>
			<div class="delegation-layout" v-show="informationdata.length">
				<delegation-card
					:information="informationdata"
					@cardClick="cardClick"
					@currentListenerList="currentListenerList"
				></delegation-card>
				<msapplication-task
					:setMandateData="setMandateData"
					:status="status"
					:spinning="spinning"
				></msapplication-task>
			</div>
		</a-spin>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import DelegationCard from './component/DelegationCard.vue'
import MsapplicationTask from './component/MsapplicationTask.vue'

import { apiInit } from '@/services' //引入接口
import { useRouter } from 'vue-router'

import { ColSize } from 'ant-design-vue/lib/grid/Col'
import { forEach, slice } from 'lodash'

export default defineComponent({
	components: {
		DelegationCard,
		MsapplicationTask,
	},
	setup() {
		const api = apiInit()
		const router = useRouter()
		const informationdata: any = ref([])
		const setMandateData: any = ref([])
		const status: any = ref('')
		const spinning = ref<boolean>(false)
		const spinningList = ref<boolean>(false)
		//委托历史授权列表
		const currentListenerList = async () => {
			spinningList.value = true
			const { data, code } =
				await api.delegateAuto.ListHistoryDelegatePrivateV3Ego_apiPOST({})
			if (code == '000000') {
				spinningList.value = false
				informationdata.value = data
			}
		}
		//获得委托历史任务详情
		const cardClick = async (row: any) => {
			setMandateData.value = await mandateForLegislator(row.id)
			status.value = row.status
		}

		const mandateForLegislator = async (id: string) => {
			spinning.value = true
			const { data, code } =
				await api.delegateAuto.GetHistoryDelegatePrivateV3Ego_apiPOST({
					payload: { id },
				})
			if (code === '000000') {
				let dataArray: any = []
				dataArray = data?.process_list
				spinning.value = false
				return dataArray
			}
		}

		//返回
		const goHome = () => {
			router.push({
				name: 'delegation',
			})
		}

		onMounted(() => {
			currentListenerList()
		})
		return {
			currentListenerList,
			informationdata,
			setMandateData,
			status,
			cardClick,
			goHome,
			spinning,
			spinningList,
		}
	},
})
</script>
<style lang="less">
.delegation {
	width: 100%;
	margin-top: -6px;
	.delegation-layout-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}
	.detegation-empty {
		height: calc(100vh - 140px);
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
	.delegation-layout {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.delegation-layout-sider {
			width: 340px;
			background: transparent;
		}
	}
	.detegation-card,
	.delegation-layout-content {
		height: calc(100vh - 150px);
	}
}
</style>
